<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Language" content="en" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test for ""</title>
	
	<style type="text/css" media="all">
	
	body {
		background: #fff;
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-size: 12px;
	}
	
	fieldset {
		margin: 20px;
	}
	
	ul {
		background: #eee;
		margin: 10px;
		padding: 10px;
		height: 200px;
		width: 200px;
		float: left;
	}
	
	li {
		background: #aaa;
		width: 100px;
		padding: 5px;
		margin: 2px;
	}
	
	.dropzone {
		background: #bbb;
	}
	
	.target {
		border: 2px dotted black;
	}
	
	.placeholder {
		background: blue;
	}
	
	</style>

	<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

	<script type="text/javascript" src="../ui.core.js"></script>
	<script type="text/javascript" src="../ui.draggable.js"></script>
	<script type="text/javascript" src="../ui.droppable.js"></script>
	<script type="text/javascript" src="../ui.sortable.js"></script>
	<script type="text/javascript" src="../ui.resizable.js"></script>
	<script type="text/javascript" src="../ui.slider.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
	
		$('fieldset > ul').sortable({
			dropOnEmpty: true,
			placeholder: "placeholder",
			connectWith: ['ul'],
			over: function(e, ui) {
				console.log('entered possible container ', this);
				
				$(this).addClass('target'); //Adding a class that will add a border
				ui.placeholder.css($.data(ui.sender[0], 'sortable').placeholderElement.offset()); //So I have to relocate the placeholder by two pixels
			},
			out: function(e, ui) {
				//console.log('moved out from possible container ', this);
				$(this).removeClass('target');
			},
			activate: function() {
				//Possible drop zone
				$(this).addClass('dropzone');
			},
			deactivate: function() {
				//Possible drop zone
				$(this).removeClass('dropzone');
			}
		});
	
	});
	</script>
</head>
<body>

	<fieldset>
	<legend>Test for ""</legend>

		<ul>
		    <li>Item 1</li>
		    <li>Item 2</li>
		    <li>Item 3</li>
		    <li>Item 4</li>
		    <li>Item 5</li>
		</ul>
		
		<ul>
		    <li>Item 1</li>
		    <li>Item 2</li>
		    <li>Item 3</li>
		    <li>Item 4</li>
		    <li>Item 5</li>
		</ul>
		
		<ul>
		    <li>Item 1</li>
		    <li>Item 2</li>
		    <li>Item 3</li>
		    <li>Item 4</li>
		    <li>Item 5</li>
		</ul>

	</fieldset>

</body>
</html>

